import { Component } from 'react';
import { connect } from 'react-redux';
//引入生成唯一随机值api
import { nanoid } from 'nanoid';
import PersonList from '../../components/PersonList';
import { addPerson } from '../../redux/actions/person';

class Person extends Component {

  addPerson = () => {
    var p = {
      id: nanoid(),
      name: this.nameInput.value,
      age: this.ageInput.value
    }
    this.props.addPerson(p)
  }

  render() { 
    return (
      <div>
        <h2>上面组件求和为:{ this.props.count }</h2>
        <h2>人们的信息:</h2>
        <input type="text" placeholder='输入名称' ref={dom => this.nameInput = dom}/>&nbsp;
        <input type="text" placeholder='输入年龄' ref={dom => this.ageInput = dom}/>&nbsp;
        <button onClick={this.addPerson}>添加</button>
        <PersonList list={this.props.person}/>
      </div>
    );
  }
}
 
export default connect(
  state => ({
    person: state.person,
    count: state.count
  }),
  { addPerson }
)(Person);
